<template>
  <div ref="dom" class="charts chart-bar" />
</template>

<script>
import echarts from 'echarts'
import tdTheme from './theme.json'
import { off } from '@/utils/tools'
import 'echarts/map/js/china.js'
echarts.registerTheme('tdTheme', tdTheme)
export default {
  name: 'ChartBar',
  props: {
    value: {
      type: Array,
      default() {
        return []
      }
    },
    text: {
      type: String,
      default: ''
    },
    subtext: {
      type: String,
      default: ''
    },
    keys: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dom: null
    }
  },
  watch: {
    value: {
      handler() {
        this.onloadCharts()
      },
      deep: true
    }
  },
  mounted() {
    this.onloadCharts()
  },
  beforeDestroy() {
    off(window, 'resize', this.resize)
  },
  methods: {
    resize() {
      this.dom.resize()
    },
    onloadCharts() {
      var vm = this
      const myChart = echarts.init(this.$refs.dom) // 这里是为了获得容器所在位置
      window.onresize = myChart.resize

      const option = {
        title: {
          // text: 'VIP用户分布',
          x: 'center',
          top: '0',
          textStyle: {
            color: '#0090C0',
            fontWeight: 'normal'
          }
        },
        tooltip: {
          // triggerOn: "click",
          formatter: function(e, t, n) {
            console.log(e.seriesName)
            console.log(e.name)
            console.log(e.value)
            return `${vm.text}<br />${e.name}: ${e.value || 0}`
            // return .5 == e.value ? e.name + "：有疑似病例" : e.seriesName + "<br />" + e.name + "：" + e.value
          }
        },
        visualMap: {
          min: 0,
          max: 1000,
          left: 26,
          bottom: 40,
          showLabel: !0,
          text: ['高', '低'],
          pieces: [
            {
              gte: 160,
              label: '> 160',
              color: '#990033'
            },
            {
              gte: 80,
              lte: 159,
              label: '80 - 159',
              color: '#CC0033'
            },
            {
              gte: 40,
              lte: 79,
              label: '40 - 79',
              color: '#FF6666'
            },
            {
              gte: 20,
              lte: 39,
              label: '20 - 39',
              color: '#CC6600'
            },
            {
              gte: 10,
              lte: 19,
              label: '10 - 19',
              color: '#FF9900'
            },
            {
              gte: 5,
              lte: 9,
              label: '5 - 9',
              color: '#FFCC00'
            },
            {
              gte: 1,
              lt: 5,
              label: '1 - 4',
              color: '#FFCC99'
            },
            {
              value: 0,
              color: '#CCCCCC'
            }
          ],
          show: !0
        },
        geo: {
          map: 'china',
          roam: !1,
          scaleLimit: {
            min: 1,
            max: 2
          },
          label: {
            normal: {
              show: !1,
              fontSize: '14',
              color: 'rgba(0,0,0,0.7)'
            }
          },
          itemStyle: {
            normal: {
              // shadowBlur: 50,
              // shadowColor: 'rgba(0, 0, 0, 0.2)',
              borderColor: 'rgba(0, 0, 0, 0.2)'
            },
            emphasis: {
              areaColor: '#f2d5ad',
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              borderWidth: 0
            }
          }
        },
        series: [{
          name: '',
          type: 'map',
          geoIndex: 0,
          data: this.value
        }]
      }

      myChart.setOption(option)
    }
  }
}
</script>
